<template>
  <div class="domainSetting">
    <block>
      <div class="item-title">域名管理</div>
      <div class="introdution">
        注意事项:
        <br />1、添加域名无需以 http:// 或者 https:// 开头（例如：h5.banchengyun.com）;
        <br />2、H5域名解析添加A记录：114.55.200.202 ;
        <br />3、在微信服务号后台公众号设置＞功能设置＞设置业务域名和JS接口安全域名（例如：h5.banchengyun.com）;
        <br />4、在微信商户平台后台＞产品中心＞开发配置＞添加支付授权目录 h5.banchengyun.top/ ;
        <br />5、点击启用。
        <br />
      </div>
    </block>
    <div class="tableList">
      <TableList
        :columns="columns"
        :data="data"
        :page="page"
        :total="pageTotal*pageNum"
        :pageNum="pageNum"
        newOne="新建域名"
        tableTitle="域名列表"
        @newOneFn="newOne"
        @changePage="changePage"
      ></TableList>
    </div>
    <Modal v-model="create" title="新建域名" @on-ok="confirmCreate" @on-cancel="cancel">
      <Form
        :model="formItem"
        :label-width="120"
        style="display:flex;flex-direction:row;align-items:center;flex-flow:wrap;height: 100px;"
        class="searchForm"
      >
        <FormItem label="域名">
          <Input v-model="formItem.domain" placeholder="请输入域名" style="width:300px"></Input>
          <br />
          <!-- <span>必须以http://或者https://开头（例如：http://kanjia.tjicc.cn）</span> -->
        </FormItem>
      </Form>
    </Modal>
    <Modal v-model="showCode" title="推广二维码" @on-ok="confirmCreate" @on-cancel="cancel" footer-hide>
      <div class="codeImg" style="height:300px;width:100%;display:flex;justify-content: center;align-items: center;">
        <img :src="qrcode" />
      </div>
    </Modal>
  </div>
</template>

<script>
import TableList from "@/components/consumer/tableList";
import {
  DomainManage,
  DomainCreate,
  DomainRecycle,
  DomainUpdate,
  DomainState
} from "api/recuit/setting";

export default {
  name: "domainSetting",
  data() {
    return {
      formItem: {
        domain: ""
      },
      domainId: "",
      qrcode: "",
      columns: [
        {
          title: "域名",
          key: "domain",
          width: 280
        },
        {
          title: "使用状态",
          key: "is_using",
          width: 150,
          render: (h, params) => {
            return h(
              "div",
              {
                style: {
                  display: "flex",
                  alignItems: "center"
                }
              },
              [
                h(
                  "span",
                  {
                    style: {
                      marginLeft: "15px",
                      color: params.row.is_using == 0 && "red"
                    }
                  },
                  params.row.is_using == 1 ? "已使用" : "未使用"
                )
              ]
            );
          }
        },
        {
          title: "是否解析",
          key: "resoluteState",
          width: 150,
          render: (h, params) => {
            return h(
              "div",
              {
                style: {
                  display: "flex",
                  alignItems: "center"
                }
              },
              [
                h(
                  "span",
                  {
                    style: {
                      marginLeft: "15px",
                      color: params.row.resoluteState == 0 && "red"
                    }
                  },
                  params.row.resoluteState == 1 ? "已解析" : "未解析"
                )
              ]
            );
          }
        },
        {
          title: "JS绑定域名",
          key: "domain",
          width: 200
        },
        {
          title: "推广链接",
          key: "img",
          width: 210,
          render: (h, params) => {
            return h(
              "div",
              {
                style: {
                  display: "flex",
                  alignItems: "center"
                }
              },
              [
                h("img", {
                  attrs: {
                    src: `https://api.qrserver.com/v1/create-qr-code/?data=http://${params.row.domain}&amp;size=100x100`
                  },
                  style: {
                    padding: "2px",
                    width: "80px",
                    height: "80px"
                  },
                  on: {
                    click: () => {
                      this.showCode = true;
                      this.qrcode = `https://api.qrserver.com/v1/create-qr-code/?data=http://${params.row.domain}&amp;size=100x100`;
                    }
                  }
                }),
                h(
                  "span",
                  {
                    style: {
                      marginLeft: "15px"
                    }
                  },
                  "点击查看大图"
                )
              ]
            );
          }
        },
        {
          title: "创建时间",
          key: "timeCreateFormat",
          width: 190
        },
        {
          title: "操作",
          key: "action",
          width: 380,
          align: "center",
          render: (h, params) => {
            let element = [];
            element = [
              h(
                "Button",
                {
                  props: {
                    type: "primary",
                    size: "middle"
                  },
                  style: {
                    marginRight: "5px"
                  },
                  on: {
                    click: () => {
                      this.newOne(params.row.domain_id, params.row.domain);
                    }
                  }
                },
                "编辑"
              ),
              h(
                "Button",
                {
                  props: {
                    type: params.row.is_using ? "info" : "success",
                    size: "middle"
                  },
                  style: {
                    marginRight: "5px"
                  },
                  on: {
                    click: () => {
                      this.usingAction(params.row.domain_id);
                    }
                  }
                },
                params.row.is_using ? "已启用" : "启用"
              ),
              h(
                "Button",
                {
                  props: {
                    type: "error",
                    size: "middle"
                  },
                  style: {
                    marginRight: "5px"
                  },
                  on: {
                    click: () => {
                      this.deleteDomain(params.row.domain_id);
                    }
                  }
                },
                "删除"
              )
            ];
            return h("div", element);
          }
        }
      ],

      data: [],
      page: 0,
      pageNum: 10,
      companySum: 0, //企业总数
      pageTotal: 0, //页面总数
      create: false,
      showCode: false
    };
  },
  components: { TableList },
  computed: {},
  mounted() {
    this.getData();
  },
  methods: {
    //获取域名列表
    getData() {
      let page = this.page;
      let pageNum = this.pageNum;
      let dataList = new Object();
      this.data = [];
      dataList.page = ++page;
      dataList.pageNum = pageNum;
      DomainManage(dataList).then(res => {
        let { domainList } = res;
        this.data = domainList;
        this.companySum = domainList.length;
        this.pageTotal = page;
        this.page = page
        this.$Loading.finish();
      });
    },
    newOne(domain_id, domain) {
      if (domain_id) {
        this.domainId = domain_id;
        this.formItem.domain = domain;
      }
      this.create = true;
    },
    confirmCreate() {
      this.$Loading.start();

      if (this.formItem.domain != "") {
        if (this.domainId) {
          DomainUpdate({
            domainId: this.domainId,
            domain: this.formItem.domain
          })
            .then(result => {
              this.$Message.success("更新成功");
              this.page = 0;
              this.getData();
            })
            .catch(err => {
              this.$Message.error(err);
              this.$Loading.finish();
            });
        } else {
          DomainCreate(this.formItem)
            .then(result => {
              this.$Message.success("创建成功");
              this.page = 0;
              this.getData();
            })
            .catch(err => {
              this.$Message.error(err);
              this.$Loading.finish();
            });
        }
      } else {
        this.$Message.error("域名填写不得为空"); 
        this.$Loading.finish();
      }
    },
    deleteDomain(domainId) {
      this.$Loading.finish();
      DomainRecycle({ domainId })
        .then(result => {
          this.$Message.success("删除成功");
          this.page = 0;
          this.getData();
        })
        .catch(err => {
          this.$Message.error(err);
        });
      this.$Loading.finish();
    },
    usingAction(domainId) {
      this.$Loading.finish();
      DomainState({ domainId })
        .then(result => {
          this.$Message.success("启用成功");
          this.page = 0;
          // this.getData();
          for (let i = 0; i < this.data.length; i++) {
            if (this.data[i].domain_id == domainId) {
              this.data[i].is_using = 1;
            } else {
              this.data[i].is_using = 0;
            }
          }
        })
        .catch(err => {
          this.$Message.error(err);
        });
      this.$Loading.finish();
    }
  }
};
</script>

<style scoped lang="less">
.domainSetting {
  width: 100%;
  height: 100%;
  padding: 2%;
  background: white;
  .codeImg {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .tableList {
    margin-top: 30px;
  }
  .item-title {
    margin-bottom: 20px;
    padding: 8px 16px;
    font-weight: bolder;
    background-color: #f5f5f5;
    color: #333;
  }
  .introdution {
    width: 80%;
    background-color: #f5f5f5;
    padding: 2%;
    line-height: 25px;
  }
}
.select-wrapper {
  width: 128px;
  margin-right: 15px;
}
</style>
